<template>
  <div>
    <el-table
        :data="userList"
        stripe
        border
        style="width:90%;margin: 30px auto 0;"
    >
      <el-table-column
          prop="id"
          label="id"
      ></el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
      ></el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
      ></el-table-column>
      <el-table-column
          label="操作"
          width="300"
      >
        <template slot-scope="scope">
          <el-button
              type="primary"
              @click="openAdvance(scope.row)"
          >借 支
          </el-button>
          <el-button
              type="primary"
              @click="openClockIn(scope.row)"
          >打 卡
          </el-button>
          <el-button
              type="primary"
              @click="getAll(scope.row);allVisible=true"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        title="预支列表"
        :visible="advanceVisible"
        :show-close="false"
        :width="width>800?'70%':'100%'"
    >
      <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin: 20px 0;"
          @change="dateChange"
          :picker-options="pickerOptions"
      />
      <el-table
          :data="advanceList"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="date"
            label="时间"
        >
        </el-table-column>
        <el-table-column
            prop="money"
            label="预支款"
        >
        </el-table-column>
        <el-table-column
            prop="remark"
            label="描述"
        >
        </el-table-column>
        <el-table-column
            label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="openEditAdvance(scope.row)">
              编 辑
            </el-button>
            <el-button type="danger" @click="openDeleteAdvance(scope.row)">
              删 除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="advanceVisible = false">关 闭</el-button>
        <el-button
            type="primary"
            @click="openAddAdvance"
        >添加预支</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="添加预支"
        :visible="AddAdvanceVisible"
        :show-close="false"
        :width="width>800?'40%':'90%'"
    >
      <el-form :model="advanceInfo" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="userInfo.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="advanceInfo.money"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="advanceInfo.remark"></el-input>
        </el-form-item>
      </el-form>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="AddAdvanceVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="advance"
        >提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="编辑"
        :visible="editAdvanceVisible"
        :show-close="false"
        width="40%"
    >
      <el-form :model="advanceInfo" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="userInfo.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="advanceInfo.money"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="advanceInfo.remark"></el-input>
        </el-form-item>
      </el-form>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="editAdvanceVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="editAdvance"
        >提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除预支记录"
        :visible="deleteAdvanceVisible"
        :show-close="false"
        width="40%"
    >
      <span>你确定删除 <span style="color: red;">{{ advanceInfo.name }}</span> 的这条借款为 <span
          style="color: red;">{{ advanceInfo.money }}</span> 记录吗？</span>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="deleteAdvanceVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="deleteAdvance"
        >提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="详情"
        :visible="allVisible"
        :show-close="false"
        width="70%"
    >
      <div style="display: flex;justify-content: space-between;width: 100%;margin: 10px 0">
      <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getAll('')"
          :picker-options="pickerOptions"
      />
      <el-button @click="allVisible = false">关 闭</el-button>
      </div>
      <div style="display: flex;justify-content: space-evenly;width: 100%;align-items: center">
        <span>
          计工工天：{{allData.days}}*
          工钱：<el-input style="display: inline-block;width: 60px"  v-model="days" placeholder="请输入工钱"></el-input>
          ={{allData.days*days}}
        </span>
        <span>
          包公工程量/米：{{allData.square_meter}}*
          工钱：<el-input style="display: inline-block;width: 60px"  v-model="square_meter" placeholder="请输入工钱"></el-input>
          ={{allData.square_meter*square_meter}}
        </span>
        <span>
          共预支：{{allMoney}}
        </span>

        <span>

        余额：{{allData.days*days + allData.square_meter*square_meter - allMoney}}
        </span>
      </div>


      <el-table
          :data="cardList"
          stripe
          border
      >
        <el-table-column
            prop="project_name"
            label="项目名"
        ></el-table-column>
        <el-table-column
            prop="date"
            label="时间"
        ></el-table-column>
        <el-table-column
            prop="days"
            label="工天"
        ></el-table-column>
        <el-table-column
            prop="square_meter"
            label="平方米"
        ></el-table-column>
        <el-table-column
            prop="location"
            label="地点"
        ></el-table-column>
        <el-table-column
            prop="type"
            label="工序"
        ></el-table-column>
        <el-table-column
            prop="user_name"
            label="姓名"
        ></el-table-column>
        <el-table-column
            prop="admin_name"
            label="管理员"
        ></el-table-column>
        <el-table-column
            label="状态"
        >
          <template slot-scope="scope">
            <!--            {{ scope.row.admin_approved | cardStatus }}-->

            <el-tag v-if="scope.row.admin_approved==0"  type="info">
              未审核
            </el-tag>
            <el-tag v-if="scope.row.admin_approved==1"  type="warning">
              已审核
            </el-tag>
            <el-tag v-if="scope.row.admin_approved==2" type="success">
              已计入
            </el-tag>
            <el-tag
                v-if="scope.row.admin_approved==3"
                type="danger"
            >
              已驳回
            </el-tag>


          </template>
        </el-table-column>
      </el-table>
      <el-table
          :data="advanceList"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="date"
            label="时间"
        >
        </el-table-column>
        <el-table-column
            prop="money"
            label="预支款"
        >
        </el-table-column>
        <el-table-column
            prop="remark"
            label="描述"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
        title="审核"
        :visible="approvedVisible"
        :show-close="false"
        width="40%"
    >
      <el-select v-model="approvedInfo.status">
        <el-option
            label="通过"
            :value="2">
        </el-option>
        <el-option
            label="驳回"
            :value="3">
        </el-option>
      </el-select>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="approvedVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="approved"
        >提 交</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="打卡记录"
        :visible="cardVisible"
        :show-close="false"
        width="70%"
    >
      <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin: 20px 10% 0;"
          @change="dateChange"
          :picker-options="pickerOptions"
      />

      <el-table
          :data="cardList"
          stripe
          border
      >
        <el-table-column
            prop="project_name"
            label="项目名"
        ></el-table-column>
        <el-table-column
            prop="date"
            label="时间"
        ></el-table-column>
        <el-table-column
            prop="days"
            label="工天"
        ></el-table-column>
        <el-table-column
            prop="square_meter"
            label="平方米"
        ></el-table-column>
        <el-table-column
            prop="location"
            label="地点"
        ></el-table-column>
        <el-table-column
            prop="type"
            label="工序"
        ></el-table-column>
        <el-table-column
            prop="user_name"
            label="姓名"
        ></el-table-column>
        <el-table-column
            prop="admin_name"
            label="管理员"
        ></el-table-column>
        <el-table-column
            label="状态"
        >
          <template slot-scope="scope">
            <!--            {{ scope.row.admin_approved | cardStatus }}-->

            <el-tag v-if="scope.row.admin_approved==0"  type="info">
              未审核
            </el-tag>
            <el-tag v-if="scope.row.admin_approved==1"  type="warning">
              已审核
            </el-tag>
            <el-tag v-if="scope.row.admin_approved==2" type="success">
              已计入
            </el-tag>
            <el-tag
                v-if="scope.row.admin_approved==3"
                type="danger"
            >
              已驳回
            </el-tag>


          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="openApproved(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span
          slot="footer"
          class="dialog-footer"
      >
        <el-button @click="cardVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  api_getSalary,
  api_aaddAdvance,
  api_deleteSalary,
  api_updateSalary,
  api_getPunchCard,
  api_audit
} from '@/api/index'

export default {
  data() {
    return {
      square_meter:'',
      days:'',
      userList: [],
      userInfo: {},
      advanceVisible: false,
      AddAdvanceVisible: false,
      deleteAdvanceVisible: false,
      editAdvanceVisible: false,
      cardVisible: false,
      approvedVisible: false,
      allVisible:false,
      advanceList: [],
      advanceInfo: {},
      cardList: [],
      approvedInfo: {},
      width:innerWidth,
      date: [],
      pickerOptions: {
        disabledDate(time) {
          const today = new Date(); // 获取当前日期
          return time.getTime() > today.getTime(); // 将结束日期大于当前日期的日期禁用
        }
      }
    }
  },
  filters: {
    cardStatus(value) {
      if (value == 0) {
        return "未审核"
      } else if (value == 1) {
        return "已审核"
      } else if (value == 2) {
        return "已审核已确认"
      } else if (value == 3) {
        return "驳回"
      }
    }
  },
  methods: {
    getAll(data){
      console.log(data)

      if (data) this.userInfo = data
      console.log(this.userInfo,'this.userInfo')
      const data2 = {
        id: this.userInfo.id,
        start: this.formDate[0],
        end: this.formDate[1]
      }
      api_getPunchCard(data2).then(res => {
        this.cardList = res.data
      })
      api_getSalary(data2, data2).then(res => {
        this.advanceList = res.data
      })
    },
    dateChange() {
      const data2 = {
        id: this.userInfo.id,
        start: this.formDate[0],
        end: this.formDate[1]
      }
      console.log(data2,'data2')

      if (this.cardVisible) {
        api_getPunchCard(data2).then(res => {
          this.cardList = res.data
        })
      } else if(this.advanceVisible) {
        api_getSalary(data2, data2).then(res => {
          this.advanceList = res.data
        })
      }
    },
    getUserList() {
      this.$http.get('/admin/auth/getUser').then(res => {
        if (res.data.status == 200) {
          this.userList = res.data.data
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    openAdvance(data) {

      this.userInfo = data
      this.advanceVisible = true
      this.advanceList = []

      const date = {}
      date.start  = this.formDate[0]
      date.end = this.formDate[1]


      api_getSalary(this.userInfo, date).then(res => {
        this.advanceList = res.data
      })
    },
    openAddAdvance() {
      this.AddAdvanceVisible = true
      this.advanceInfo.user_id = this.userInfo.id
    },
    advance() {
      api_aaddAdvance(this.advanceInfo).then(res => {
        if (res.status == 200) {
          this.dateChange()
          this.AddAdvanceVisible = false
          this.$message({
            type: "success",
            message: "添加借款成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    openDeleteAdvance(data) {
      this.deleteAdvanceVisible = true
      this.advanceInfo = data
    },
    deleteAdvance() {
      api_deleteSalary(this.advanceInfo).then(res => {
        if (res.status == 200) {
          this.deleteAdvanceVisible = false
          this.dateChange()
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    openEditAdvance(data) {
      this.editAdvanceVisible = true
      this.advanceInfo = data
    },
    editAdvance() {
      api_updateSalary(this.advanceInfo).then(res => {
        if (res.status == 200) {
          this.editAdvanceVisible = false
          this.dateChange()
          this.$message({
            type: "success",
            message: "修改成功"
          })
        } else {
          this.$message({
            type: "error",
            message: "修改成功"
          })
        }
      })
    },
    openClockIn(data) {
      this.userInfo = data
      console.log(data,'data')

      const data2 = {
        id: this.userInfo.id,
        start: this.formDate[0],
        end: this.formDate[1]
      }
      console.log(data2)
      api_getPunchCard(data2).then(res => {
        this.cardList = res.data
      })
      this.cardVisible = true
    },
    openApproved(data) {
      this.approvedInfo = data
      this.approvedVisible = true
    },
    approved() {
      api_audit(this.approvedInfo).then(res => {
        if (res.status == 200) {
          this.approvedVisible = false
          this.$message({
            type: "success",
            message: "审核成功"
          })
          this.dateChange()
        }
      })
    }
  },
  mounted() {
    let today = new Date()
    this.date = [today, today]
    this.getUserList()
  },
  computed: {
    formDate() {
      let arr = []
      if (this.date[0] && this.date[1]) {
        arr[0] = `${this.date[0].getFullYear()}-${this.date[0].getMonth()+1}-${this.date[0].getDate()}`
        arr[1] = `${this.date[1].getFullYear()}-${this.date[1].getMonth()+1}-${this.date[1].getDate()}`
      }
      return arr
    },

    allData() {

      let days = 0;
      let square_meter = 0;
      this.cardList.forEach(item => {

        if (item.admin_approved == 2) {
          days += Number(item.days)
          square_meter += Number(item.square_meter)
        }
      })
      return {
        days,
        square_meter
      }
    },
    allMoney() {
      let money = 0;
      this.advanceList.forEach(item => {
        money += Number(item.money)
      })
      return money
    }






  },
}

</script>

<style>
</style>
